<template>
  <div class="settings-panel">
    <h3>系统设置</h3>
    <form class="settings-form" @submit.prevent="save">
      <div class="form-row">
        <label>站点名称：</label>
        <input v-model="form.siteName" required />
      </div>
      <div class="form-row">
        <label>主题色：</label>
        <select v-model="form.theme">
          <option value="blue">蓝色</option>
          <option value="green">绿色</option>
          <option value="dark">深色</option>
        </select>
      </div>
      <div class="form-row">
        <label>登录方式：</label>
        <select v-model="form.loginType">
          <option value="account">账号密码</option>
          <option value="email">邮箱验证码</option>
        </select>
      </div>
      <div class="form-row">
        <label>维护模式：</label>
        <input type="checkbox" v-model="form.maintenance" />
        <span class="switch-label">{{ form.maintenance ? '开启' : '关闭' }}</span>
      </div>
      <div class="form-row">
        <button type="submit" class="save-btn">保存设置</button>
      </div>
      <div v-if="msg" class="msg">{{ msg }}</div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const form = ref({
  siteName: '后台管理系统',
  theme: 'blue',
  loginType: 'account',
  maintenance: false,
});
const msg = ref('');
function save() {
  msg.value = '设置已保存！';
  setTimeout(() => { msg.value = ''; }, 1500);
}
</script>

<style scoped>
.settings-panel {
  max-width: 420px;
  margin: 0 auto;
}
.settings-form {
  background: #f8fafc;
  border-radius: 8px;
  padding: 24px 28px 12px 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.form-row label {
  width: 90px;
  color: #555;
}
.form-row input[type="text"], .form-row select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.form-row input[type="checkbox"] {
  margin-left: 0;
  margin-right: 8px;
  width: 18px;
  height: 18px;
}
.switch-label {
  color: #1976d2;
  font-size: 15px;
  margin-left: 6px;
}
.save-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.save-btn:hover {
  background: #1256a3;
}
.msg {
  color: #43a047;
  margin-top: 8px;
  font-size: 15px;
}
</style>
